import { Table, Tag } from "antd";
// import Column from "antd/es/table/Column";
const { Column } = Table;

export default function PractiseSecond() {
  const resData = {
    total: 10,
    results: [
      { name: "zhangsan", age: 11 },
      { name: "lisi", age: 12 },
    ],
  };
  // const columns = [
  //   {
  //     title: "MY NAME",
  //     dataIndex: "name",
  //     key: "name",
  //   },
  //   {
  //     title: "AGE",
  //     dataIndex: "age",
  //     key: "age",
  //   },
  //   {
  //     title: "Beautiful Name",
  //     // dataIndex: "name",
  //     key: "xxx",
  //     render: (_: any, row: any, index: number) => {
  //       // console.log(a, "----");
  //       // console.log(b, "====");
  //       // console.log(c, "!!!!!");
  //       return <Tag color='purple'>{row.name.toUpperCase()}</Tag>;
  //     },
  //     // render: () => (<div>cc</div>),
  //   },
  // ];
  const renderBn = (_: any, row: any, index: number) => {
    return <Tag color="purple">{row.name.toUpperCase()}</Tag>;
  };

  return (
    <>
      <Table dataSource={resData.results}>
        <Column title="MY NAME" dataIndex="name" key="name"></Column>
        <Column title="AGE" dataIndex="age" key="age"></Column>
        <Column title="BeautifulName" key="bn" render={renderBn}></Column>
      </Table>
    </>
  );
}
